<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-select v-model="search_name" value-key="id" remote filterable placeholder="请搜索设备号添加"
					@change="handlecheckUUID" :remote-method="uuidChange" style="width: 100%;">
					<el-option v-for="item in uuid_list" :key="item.id" :label="item.uuid" :value="item">
						<span>{{ item.uuid }}/{{item.remark}}</span>
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<div class="addressd-box">
			<div class="addressd-box-title">
				<span>选中设备号,点击即可删除</span>
				<el-button type="danger" plain size="mini" @click="delAll">全部清空</el-button>
			</div>
			<div class="choose-address">
				<div class="choose-address-info" v-for="(item, index) in check_uuid" :key="index">
					<el-button type="primary" size="mini" icon="el-icon-delete" @click="delUuid(index)">{{item.uuid}}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				uuid_list: [],
				c_project_id: this.project_id,
				page: 1,
				search_name: '',
				uuidList: this.parent_uuid,
				check_uuid: []
			}
		},
		props: ['parent_uuid'],
		watch: {
			parent_uuid(val) {
				this.addresses = val;
			}
		},
		mounted() {
			this.uuidChange();
		},
		methods: {
			// 加载更多数据
			uuidChange(val) {
				let self = this;
				self.search_name = val;
				API.devices(1, 10, 0, 0, self.search_name).then(res => {
					let data = res.data.data;
					self.$notify({
						message: '搜索成功'
					});
					self.uuid_list = [];
					data.map(item => {
						self.uuid_list.push({
							id: item.id,
							uuid: item.uuid,
							remark: item.remark
						})
					})
					return self.uuid_list;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 选中的地址
			handlecheckUUID(val) {
				let self = this;
				let copy_check_uuid = [];
				copy_check_uuid.push(val);
				for (let i = 0; i < copy_check_uuid.length; i++) {
					if (!self.check_uuid.includes(copy_check_uuid[i])) { //includes 检测数组是否有某个值
						self.check_uuid.push(copy_check_uuid[i]);
						self.uuidList.push(copy_check_uuid[i].id);
					} else {
						self.$notify.error({
							message: '已选中该UUID,请勿重复选择'
						});
					}
				}
				self.$emit('getAddresses', {
					uuidList: self.uuidList
				})
			},
			// 删除地址
			delUuid(val) {
				let self = this;
				self.check_uuid.splice(val, 1);
				self.uuidList.splice(val, 1);
				self.$emit('getAddresses', {
					uuidList: self.uuidList
				})
			},
			// 全部清空
			delAll() {
				let self = this;
				self.uuidList = [];
				self.check_uuid = [];
				self.$emit('getAddresses', {
					uuidList: self.uuidList
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.addressd-box {
		box-sizing: border-box;
		margin-top: 10px;
		// padding: 10px;
		border: 1px #ccc solid;
		border-radius: 10px;

		.addressd-box-title {
			display: flex;
			align-items: center;
			padding: 6px 10px;
			font-size: 14px;
			
			span {
				margin-right: 10px;
			}
		}

		.choose-address {
			display: flex;
			flex-wrap: wrap;

			.choose-address-info {
				margin: 6px;
			}
		}
	}
</style>
